<template>
    <div class="wrapper">
        <div>
            <span>直播状态</span>
            <el-switch v-model="onlineStatus"/>
        </div>
        <div>
            <span>轨迹状态</span>
            <el-switch v-model="layerStatus"/>
        </div>
        <hr>
    </div>
</template>

<script>
	export default {
		name: 'StatusTabView',
		data() {
			return {
				onlineStatus: false, // 直播状态
				layerStatus: false // 轨迹状态
			}
		},
		watch: {
			onlineStatus(newVal) {
				this.$emit('online-status-switch', newVal)
			}
		}
	}
</script>

<style scoped lang="scss">

    .wrapper {
        padding: 16px 0;
        font-family: "PingFang SC";
        color: white;
        font-size: 14px;

        hr {
            size: 1px;
            color: #FFFFFF;
            alignment: center;
            opacity: 0.2;
            margin: 0 16px;
            margin-top: 16px;
        }

        div {
            display: flex;
            justify-content: space-between;
            margin: 0 16px;

            &:nth-child(1) {
                margin-bottom: 24px;
            }
        }
    }
</style>
